<script>
  export let rect;
  export let title;
  export let data;
</script>

<div
  class="card w-96 bg-base-100 shadow-xl data-pop"
  style={`left:${rect[0]}px;top:${rect[1]}px`}
>
  {#if data}
    <div class="card-body">
      <h2 class="card-title">{title}</h2>
      {#each data as month, i}
        {#if data.length > 1}
          <p>{i + 1}月-{month}</p>
        {:else}
          <p>{month}</p>
        {/if}
      {/each}
    </div>
  {/if}
</div>

<style>
  .data-pop {
    position: fixed;
    width: 240px;
    min-height: 48px;
  }
</style>
